<template>
	<el-container>
		<el-header>
			<div style="display: flex;border: 1px solid black;line-height: 70px;">
				<div style="width: 66%;text-indent: 0.5em;font-size: 18px;font-weight: bold;">我的订单详细</div>
				<div>
					<div>
						<span>未付款</span>
						<el-tooltip :content="'Switch value: ' + value" placement="top">
						    <el-switch
							  v-model="value"
						      active-color="#13ce66"
						      inactive-color="#ff4949"
						      active-value="100"
						      inactive-value="0"
						    />
						  </el-tooltip>
						<span>已付款</span>
					</div>
				</div>
				<div>
					<el-date-picker
					      v-model="value1"
					      type="date"
					    >
					      <template #default="cell">
					        <div class="cell" :class="{ current: cell.isCurrent }">
					          <span class="text">{{ cell.text }}</span>
					          <span v-if="isHoliday(cell)" class="holiday"></span>
					        </div>
					      </template>
					    </el-date-picker>
				</div>
				<div>
					<el-date-picker
					      v-model="value2"
					      type="date"
					    >
					      <template #default="cell">
					        <div class="cell" :class="{ current: cell.isCurrent }">
					          <span class="text">{{ cell.text }}</span>
					          <span v-if="isHoliday(cell)" class="holiday"></span>
					        </div>
					      </template>
					    </el-date-picker>
				</div>
				<div>
					<el-button @click="cx()">查询</el-button>
				</div>
			</div>
		</el-header>
		<el-main>
			<el-table
			    :data="lists"
			    border
			    style="width: 100%;margin: 10px auto 0;border: 1px solid black;">
				
				
				<el-table-column
				  prop="ordid"
				  label="订单号"
				  width="180">
				</el-table-column>
				
				<el-table-column
				  prop="addr"
				  label="收货地址"
				  width="380">
				</el-table-column>
				
				<el-table-column
				  prop="phone"
				  label="电话"
				  width="180">
				</el-table-column>
				
				<el-table-column
				  prop="shipno"
				  label="发货单号"
				  width="380">
				</el-table-column>
				
				<el-table-column
				  prop="amount"
				  label="总价"
				  width="160">
				</el-table-column>
				
				<el-table-column
				  label="是否付款"
				  width="180">未付款
				</el-table-column>
				
				<el-table-column
				  prop="tcreate"
				  label="下单时间"
				  width="180">
				  <template #default='scope' >
					  {{filters(scope.row.tcreate)}}
				  </template>
				</el-table-column>
				
				<el-table-column
				  label="操作"
				  width="180"
				  >
				  <template #default='scope'>
					  <el-popover placement="left" :width="600" trigger="click">
					      <template #reference >
					        <el-button @click="btn(scope.row.ordid)">明细</el-button>
					      </template>
						  <p>{{scope.row.ordid}}#订单详情  发往:</p>
					      <el-table :data="mx">
					        <el-table-column
							label="图片"
					          width="100">
							  <template #default='scope'>
							  	<img :src="`${$Imgurl}/api/public/showImg/${scope.row.picture}`" style="width: 50px;">
								<!-- {{scope.row.picture}} -->
							  </template>
					        </el-table-column>
							
							<el-table-column
							  prop="name"
							  label="商品名称"
							  width="200">
							</el-table-column>
							
							<el-table-column
							  prop="price"
							  label="商品价钱"
							  width="100">
							</el-table-column>
							
							<el-table-column
							  prop="num"
							  label="商品数量"
							  width="100">
							</el-table-column>
							
							<el-table-column
							  label="小计"
							  width="100">
							  <template #default='scope'>
								 <span>
									  {{scope.row.num*scope.row.price}}
								 </span>
							  </template>
							</el-table-column>
							
					      </el-table>
					    </el-popover>
				  </template>
				  
				</el-table-column>
				
			  </el-table>
			  
		</el-main>
		<el-button type="primary" style="margin: 0 auto;" @click="xs()">显示更多</el-button>
	</el-container>
</template>

<script>
// 拦截器
import instance from '../../ajax/index.js';
// 时间
// 操作明细defineComponent, reactive, toRefs
import { defineComponent, ref , reactive, toRefs } from 'vue';
// 
// 
// import { defineComponent, reactive, toRefs } from 'vue'
export default{
	name:'Myorder',
	data(){
		return{
			wfk:'未付款',
			yfk:'已付款',
			value: '100',
			value1: '',
			value2: '',
			myorderlist:[],
			lists:[],
			mx:[],
			ddh:0,
			jj:0,
			ii:0,
			qb:[],
		}
	},
	created() {
		// 发起get请求，获取数据
		instance.get('/api/fore/ord/findOrdLineByPage/0/5').then( (res)=>{
			// 判断状态
			// console.log(res.data.data);
			if(res.status === 200){
				// 向表格渲染数据
				this.myorderlist = res.data.data.orders;
				for(let index in this.myorderlist){
					if(this.value1 <= this.myorderlist[index].tcreate && this.myorderlist[index].tcreate <= this.value1){
						let obj = {
							
						}
					}
				}
				this.lists = this.myorderlist;
				this.ddh = this.myorderlist[0].ordid-5;
				console.log(this.myorderlist); 
			}
		} ).catch( (error)=>{
			console.log(error);
		} )
	},
	computed:{
		filters(){
			return(x)=>{
				let year = new Date(x).getFullYear();
				let month = new Date(x).getMonth() + 1;
				let day = new Date(x).getDate();
				return year + '-' + month + '-' + day
			}
		},
		filtera(){
			return(y)=>{
				this.value = 0;
			}
		}
	},
	methods:{
		btn(x){
			// 发起get请求，获取数据
			instance.get('/api/adm/ord/findItemInfoByOrdid/'+x+'').then( (res)=>{
				// 判断状态
				// console.log(res.data.data);
				if(res.status === 200){
					// 向表格渲染数据
					this.mx = res.data.data;
					console.log(this.mx);
				}
			} ).catch( (error)=>{
				console.log(error);
			} )
		},
		xs(){
			this.jj++;
			// 发起get请求，获取数据
			for(let i=this.jj ; i<this.jj+1 ; i++){
				instance.get('/api/fore/ord/findOrdLineByPage/'+this.jj+'/5').then( (res)=>{
					// 判断状态
					// console.log(res.data.data);
					if(res.status === 200){
						// 向表格渲染数据
						for(let i=0 ; i<5 ; i++){
							if(res.data.data.orders[i]){
								this.myorderlist.push(res.data.data.orders[i]);
								this.lists = this.myorderlist;
								// console.log(res.data.data.orders[i]);
								console.log(res.data.data.orders[0]);
							}
						}
						// console.log(this.myorderlist);
					}
				} ).catch( (error)=>{
					console.log(error);
				} )
			}
		},
		// 查询
		cx(){
			console.log(this.value1.getTime());
			console.log(this.value2.getTime());
			let time1 = this.value1.getTime();
			let time2 = this.value2.getTime();
			let bl = 2;
			// console.log(this.lists.splice(0,1));
			if(time1<=time2){
				// if(this.myorderlist){
				// 	console.log(this.myorderlist);
				// }
				for(let index in this.myorderlist){
					let sj = this.myorderlist[index].tcreate;
					console.log(sj);
					if(this.time1 <= sj && sj <= this.time2){
						// console.log(sj);
						console.log(this.time1);
						console.log(this.time2);
						// console.log(this.myorderlist.splice(0,1));
					}else{
						// this.myorderlist.splice(index,1);
						// console.log(this.myorderlist.splice(0,1));
						// this.myorderlist[index].show = false;
					}
					// console.log(this.myorderlist);
				}
				
			}else{
				alert('时间选择有错');
			}
		}
	},
	setup() {
    const values = ref('2021-10-29')
    const holidays = [
      '2021-10-01',
      '2021-10-02',
      '2021-10-03',
      '2021-10-04',
      '2021-10-05',
      '2021-10-06',
      '2021-10-07',
    ]

    function isHoliday({ dayjs }) {
      return holidays.includes(dayjs.format('YYYY-MM-DD'))
    }

    return {
      values,
      isHoliday,
    }
  },
}
</script>

<style scoped>
*{
	margin: 0;
	padding: 0;
}
</style>
